<template>
    <div class="seller-container" ref="sellerContainer">
        <div class="seller-wrapper">
            <div class="seller-top border-1px-bottom">
                <h2 class="seller-title">{{seller.name}}</h2>
                <div class="seller-detail">
                    <v-star :size="36" :score="seller.score" class="star"></v-star>
                    <span class="rating-count">({{seller.ratingCount}})</span>
                    <span class="sell-count">月售{{seller.sellCount}}单</span>
                </div>
                <div class="favorite-container" :class="{'active':favoriteFlag}" @click="changeFavoriteFlag">
                    <i class="icon-favorite"></i>
                    <span class="fovorite-text">{{favoriteText}}</span>
                </div>
            </div>
            <ul class="seller-msg">
                <li class="seller-msg-list border-1px-left">
                    <h3 class="msg-list-title">起送价</h3>
                    <p class="msg-list-content">{{seller.minPrice}}<span class="unit">元</span></p>
                </li>
                <li class="seller-msg-list border-1px-left">
                    <h3 class="msg-list-title">商家配送</h3>
                    <p class="msg-list-content">{{seller.deliveryPrice}}<span class="unit">元</span></p>
                </li>
                <li class="seller-msg-list">
                    <h3 class="msg-list-title">平均配送时间</h3>
                    <p class="msg-list-content">{{seller.deliveryTime}}<span class="unit">元</span></p>
                </li>
            </ul>
            <v-split></v-split>
            <div class="bulletin border-1px-bottom">
                <h2 class="bulletin-title">公告与活动</h2>
                <p class="bulletin-content">{{seller.bulletin}}</p>
            </div>
            <ul class="purchase-list">
                <li class="purchase-list-item border-1px-top" v-for="(support,index) in seller.supports">
                    <v-purchase :size="4" :icon="classMap[index]" class="icon"></v-purchase>
                    <span class="purchase-text">{{support["description"]}}</span>
                </li>
            </ul>
            <v-split></v-split>
            <div class="seller-outlook" v-show="seller.pics&&seller.pics.length>0">
                <h2 class="outlook-title">商家实景</h2>
                <div class="outlook-wrapper" ref="picListWrapper">
                    <ul class="outlook-list" ref="picListContainer">
                        <li class="outlook-list-item" v-for="pic in seller.pics">
                            <img :src="pic" alt="" class="seller-img" ref="picArr"/>
                        </li>
                    </ul>
                </div>
            </div>
            <v-split></v-split>
            <div class="seller-detail-msg">
                <h2 class="seller-detail-title">商家信息</h2>
                <ul class="seller-detail-list">
                    <li class="seller-list-item border-1px-top">该商品支持开发票，请在下单时填好发票抬头</li>
                    <li class="seller-list-item border-1px-top">品类：其他菜系、包子粥店</li>
                    <li class="seller-list-item border-1px-top">地址：北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340</li>
                    <li class="seller-list-item border-1px-top">营业时间：10:00 - 20:30</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script type="es6">
    import star from "../star/star"
    import split from '../split/split'
    import purchase from "../purchase/purchase"
    import BScroll from 'better-scroll'
    export default{
        name:"seller",
        data(){
            return {
                favoriteFlag:false,
                classMap : []
            }
        },
        props:{
            seller:{
                type:Object
            }
        },
        created () {
            this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
        },
        mounted () {
            this.$nextTick(()=>{
                this._initScroll()
                this._initPic()
            })
        },
        watch:{
            "seller" () {
                this.$nextTick(()=>{
                    this._initScroll()
                    this._initPic()
                })
            }
        },
        methods:{
            changeFavoriteFlag () {
                this.favoriteFlag = !this.favoriteFlag
            },
            _initScroll () {
                    if(!this.mainScroll ){
                        this.mainScroll = new BScroll(this.$refs.sellerContainer,{
                            click:true
                        })
                    }else{
                        this.mainScroll.refresh()
                    }
            },
            _initPic () {
                let pics = this.$refs.picArr
                let picListContainer = this.$refs.picListContainer
                let picListWrapper = this.$refs.picListWrapper
                let imgListWidth = 0
                let marginWidth = 6
                if(pics&&pics.length>0){
                    pics.forEach((pic,key)=>{
                        imgListWidth+=pic.clientWidth
                        if(key<pics-1){
                            imgListWidth+=marginWidth
                        }
                    })
                }

                picListContainer.style.width=`${imgListWidth}px`

                if(!this.picScroll ){
                    this.picScroll = new BScroll(this.$refs.picListWrapper,{
                        scrollX: true,
                        eventPassthrough: 'vertical'
                    })
                }else{
                    this.picScroll.refresh()
                }
            }
        },
        computed:{
            favoriteText () {
                if(this.favoriteFlag){
                    return "已收藏"
                }else{
                    return "收藏"
                }
            }
        },
        components:{
            "v-star":star,
            "v-split":split,
            "v-purchase":purchase
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
        @import "../../../public/stylesheet/mixin.less";
        .seller-container{
            position:absolute;
            top:174px;
            left:0;
            right:0;
            bottom:0;
            overflow:hidden;
            .seller-wrapper{
                .seller-top{
                    position:relative;
                    margin:18px 18px 0;
                    padding-bottom:18px;
                    .border-1px-bottom(rgba(7,17,27,0.1));
                    .seller-title{
                        margin-bottom:8px;
                        font-size:14px;
                        line-height:14px;
                        color:rgb(7,17,27);
                    }
                    .seller-detail{
                        font-size:0;
                        .star{
                            vertical-align:top;
                        }
                        .rating-count{
                            margin-left:8px;
                            margin-right:12px;
                            vertical-align:top;
                            font-size:10px;
                            line-height:18px;
                            color:rgb(77,85,93);
                        }
                        .sell-count{
                            font-size:10px;
                            line-height:18px;
                            color:rgb(77,85,93);
                        }
                    }
                    .favorite-container{
                        position:absolute;
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        width:36px;
                        right:0;
                        top:0;
                        &.active{
                            .icon-favorite{
                                font-size:24px;
                                color:rgb(240,20,20);
                                margin-bottom:4px;
                            }
                            .fovorite-text{
                                color:rgb(77,85,93);
                                font-size:10px;
                            }
                        }
                        .icon-favorite{
                            font-size:24px;
                            color:#d4d6d9;
                            margin-bottom:4px;
                        }
                        .fovorite-text{
                            color:#d4d6d9;
                            font-size:10px;
                        }
                    }
                }
                .seller-msg{
                    display:flex;
                    margin:18px;
                    .seller-msg-list{
                        display:flex;
                        flex-direction:column;
                        align-items:center;
                        flex:1;
                        padding:4px 0;
                        &:not(:last-child){
                            .border-1px-right(rgba(7,17,27,0.1));
                        }
                        .msg-list-title{
                            margin-bottom:4px;
                            font-size:10px;
                            line-height:10px;
                            color:rgb(147,153,159);
                        }
                        .msg-list-content{
                            font-size:18px;
                            color:rgb(7,17,27);
                            .unit{
                                font-size:10px;
                            }
                        }

                    }
                }
                .bulletin{
                    margin:18px 18px 0;
                    padding-bottom:16px;
                    .border-1px-bottom(rgba(7,17,27,0.1));
                    .bulletin-title{
                        margin-bottom:8px;
                        font-size:14px;
                        line-height:14px;
                        color:rgb(7,17,27);
                    }
                    .bulletin-content{
                        margin:0 12px;
                        font-size:12px;
                        line-height:2em;
                        color:rgb(240,20,20);
                    }
                }
                .purchase-list{
                    margin:0 18px;
                    .purchase-list-item{
                        padding:16px 12px;
                        font-size:0;
                        .icon{
                            line-height:16px;
                            margin-right:6px;
                        }
                        .purchase-text{
                            font-size:12px;
                            line-height:16px;
                        }
                        &:not(:first-child){
                            .border-1px-top(rgba(7,17,27,0.1))

                        }


                    }
                }
                .seller-outlook{
                    margin:18px 0 18px 18px;
                    .outlook-title{
                        margin-bottom:12px;
                        font-size:14px;
                        line-height:14px;
                        color:rgb(7,17,27);
                    }
                    .outlook-wrapper{
                        .outlook-list{
                            display:flex;
                            overflow:hidden;
                            flex-wrap:nowrap;
                            .outlook-list-item{
                                &:not(:last-child){
                                    margin-right:6px;
                                }
                                margin-right:6px;
                                .seller-img{
                                    width:120px;
                                    height:90px;
                                }
                            }
                        }
                    }
                }
                .seller-detail-msg{
                    margin:18px;
                    padding-bottom:20px;
                    .seller-detail-title{
                        margin-bottom:8px;
                        font-size:14px;
                        line-height:14px;
                        color:rgb(7,17,27);
                    }
                    .seller-list-item{
                        padding:16px 12px;
                        font-size:12px;
                        line-height:16px;
                        color:rgb(7,17,27);
                        .border-1px-top(rgba(7,17,27,0.1));
                    }
                }
            }
        }
</style>